<template>
  <div class="top-navbar">
    <div class="navbar-left">
      <div class="logo">
        <span class="logo-text">ES-SQL</span>
      </div>
      <h1 class="title">Elasticsearch SQL Client</h1>
    </div>
    
    <div class="navbar-center">
      <div v-if="isConnected" class="connection-status connected">
        已连接至 {{ connection.host }}:{{ connection.port }}
      </div>
      <div v-else class="connection-status disconnected">
        未连接
      </div>
    </div>
    
    <div class="navbar-right">
      <!-- 移除了右上角的刷新按钮 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopNavbar',
  props: {
    isConnected: {
      type: Boolean,
      required: true
      },
    connection: {
      type: Object,
      required: true
    },
    refreshing: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    refreshIndices() {
      this.$emit('refresh-indices');
    }
  }
}
</script>

<style scoped>
.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #2D3748;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-text {
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.title {
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  margin: 0;
}

.navbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.connection-status {
  padding: 6px 12px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.connection-status.connected {
  background-color: #38A169;
  color: white;
}

.connection-status.disconnected {
  background-color: #E53E3E;
  color: white;
}

.navbar-right {
  display: flex;
  align-items: center;
}
</style>